require('../css/echarts.less')
document.ready(function(){
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1=echarts.init(document.getElementById('bar'));
    // 指定图表的配置项和数据
    var option = {
        // 这是标题区域的开始
        title: {
            text: '近七天运动时长',
            show:true,
            textStyle: {
                fontSize: "15px",
                color:"skyblue"
              },
              top:'10px',
              left:'10px',
              
        },
        //这是工具提示的开始
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                
                label: {
                    backgroundColor: 'skyblue'
                }
            },
            formatter: '{a}-{b}-{c}'
           
        },
        legend: {
            data:[],
            show: true,
            left:'50%',
            top:'10px'

        },
        grid:{
        left:'center',
         width:'40px'
        },
        toolbox:{
         feature:{
            saveAsImage:{
                type:'jpg'
            },
            restore: {
                show: true ,
                title: '还原' ,
                }
         },
         show:true,
        },
        // 这是x轴的数据渲染
        xAxis: {
            data: []
        },
        yAxis: {},
        // 这是核心数据的网格数据渲染界面;
        series: [{
            name: '销量',
            type: 'bar',
            data: []
            
        },
      
    
    ]
    };

    // 使用刚指定的配置项和数据显示图表。
 
   
  //这是下面的饼状图区域的开始
  var option1 = {
    title: {
        text: '运动分类',
        // subtext: '纯属虚构',
        left: '10px',
        top:'10px',
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        top:'middle',
    },
  
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
                // {value: 1048, name: '搜索引擎'},
                // {value: 735, name: '直接访问'},
                // {value: 580, name: '邮件营销'},
                // {value: 484, name: '联盟广告'},
                // {value: 300, name: '视频广告'}
            ],
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
               
            },
            labelLine: {
                show: false
            },
            label: {
                show: false,
                position: 'center'
            },
          
                left:'45%',
           
                   width:'200px',
                   height:'200px',
               
        
           
           
        },
    ]
};

  //这是 发送axios 请求区域的开始
  let userId=JSON.parse(localStorage.getItem('user')).userId
  console.log(userId)
  axios.get(window.$$.username+`/sport/data/${userId}`)
  .then(function(res){
   let ret=res.data;
   let arr1=ret.data.days;
 console.log(ret);
//  console.log(arr1)
   if(ret.status===0){
       let seriesArr=ret.data.days.map(function(v){
           return v.dayTimes
       })
   option.series[0].data=seriesArr;
       let dateArr=ret.data.days.map(function(v){
         return v.date
     });
     option.xAxis.data=dateArr;
     myChart.setOption(option);
      const obj={
           '骑行':0,
           '跑步':0,
           '训练':0,
      }
      for(const k of arr1){
           for(const s of k.exerciseData){
                 obj[s.type] += (s.time - 0)
                 console.log(s.time-0)
           }
      }
      for(const i in obj){
        option1.series[0].data.push({
            value:obj[i],
            name:i
        })
      }
     myChart1.setOption(option1);
   }
  })
  .catch(function(error){
        console.log(error);
  });

//尾部
})